﻿@page "/components/popover"

<DocsPage>
    <DocsPageHeader Title="Popover" Component="@nameof(MudPopover)" />

    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Popover">
                <Description>
                    You have full control over the popover's content and its open state.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(PopoverSimpleExample)">
                <PopoverSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Direction and Location">
                <Description>
                    Define the starting point and offset of the popover relative to its parent component.
                    You can set the popover location either through custom CSS or directly via inline styles.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(PopoverLocationExample)" ShowCode="false">
                <PopoverLocationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Overflow Behavior">
                <Description>
                    Configure the popover's overflow behavior using one of the following options:
                    <CodeInline>FlipNever</CodeInline>, <CodeInline>FlipOnOpen</CodeInline>, or <CodeInline>FlipAlways</CodeInline>.<br />
                    When space is limited, the popover can flip its position to stay visible. In center mode, the popover flips vertically. Scroll the page to see this behavior in action.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(PopoverOverflowBehaviorExample)" ShowCode="false">
                <PopoverOverflowBehaviorExample />
            </SectionContent>
        </DocsPageSection>


        <DocsPageSection>
            <SectionHeader Title="Complex Content">
                <Description>
                    Popovers support complex content and adjust their position automatically to fit their surroundings, just like any other Blazor component.
                </Description>
            </SectionHeader>
            <SectionContent Codes="@(new[] { new CodeFile("Page.razor", "PopoverComplexContentExample"), new CodeFile("Component.razor", "PopoverDynamicContentExample") })" ShowCode="false">
                <PopoverComplexContentExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Popover RelativeWidth">
                <Description>
                    Popovers can have their widths set relative to their activator or parent through the <CodeInline>DropdownWidth</CodeInline> enum:
                    <ul class="ml-2">
                        <li><CodeInline>Ignore</CodeInline> (default): Popover width adjusts independently of the activator.</li>
                        <li><CodeInline>Relative</CodeInline>: Popover width matches the activator’s width precisely.</li>
                        <li><CodeInline>Adaptive</CodeInline>: Minimum width matches activator or parent, but popover can grow wider as needed.</li>
                    </ul>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(PopoverRelativeWidthExample)" ShowCode="false">
                <PopoverRelativeWidthExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Popover Inception">
                <Description>
                    Popovers can be nested within elements that already use a popover, such as tooltips inside menus.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(PopoverInceptionExampleExample)" ShowCode="false">
                <PopoverInceptionExampleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Individual Dropdown Settings">
                <Description>
                    Some components combine <MudLink Href="/components/popover">MudPopover</MudLink> with <MudLink Href="/components/overlay">MudOverlay</MudLink> to manage item lists. These can be customized using dropdown settings, which sets default appearance and behavior options:
                    <ul class="ml-2">
                        <li><CodeInline>PopoverFixed = false</CodeInline> -- Popover does not remain fixed during scrolling.</li>
                        <li><CodeInline>OverflowBehavior = MudGlobal.PopoverDefaults.OverflowBehavior</CodeInline> -- Adjusts popover behavior when space is limited.</li>
                        <ul class="ml-4">
                            <li>
                                <MudText Typo="Typo.caption">
                                    * Defaults apply from <CodeInline>MudGlobal.PopoverDefaults.OverflowBehavior</CodeInline>, which is FlipOnOpen unless modified.
                                </MudText>
                            </li>
                        </ul>
                    </ul>
                    <br />Additional settings on the <CodeInline>MudMenu</CodeInline> component include:
                    <ul class="ml-2">
                        <li><CodeInline>RelativeWidth = DropdownWidth.Ignore</CodeInline> -- Width adjusts independently.</li>
                        <li><CodeInline>AnchorOrigin = Origin.BottomLeft</CodeInline> -- Popover opening position.</li>
                        <ul class="ml-4">
                            <li>
                                <MudText Typo="Typo.caption">
                                    * Defaults apply if AnchorOrigin or TransformOrigin aren't explicitly set, with nested behavior available for customization.
                                </MudText>
                            </li>
                        </ul>
                        <li><CodeInline>TransformOrigin = Origin.TopLeft</CodeInline> -- Transform origin point.</li>
                    </ul>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(PopoverIndividualSettingsExample)" ShowCode="false">
                <PopoverIndividualSettingsExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
